<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11 验证码</title>
</head>
<body>
    <h1>随机验证码</h1>
    验证码：<input type="text" id="code"> 
    <input type="button" value="" id="randomNum"> <span id="inf"></span><br> 
    <input type="button" value="提交" id="btn">
</body>
<script>
    /*
        11 验证码:封装
            * 生成四位数随机验证码（字母和数字组合）
            * 把验证码放入表单中，点击一次就更新一次
            * 输入的验证码要和随机数一致才能验证通过
            
        知识点补充：
            * 字符串是有长度的，可以通过下标(从0开始)获取某个字符: 变量名.length
            * 随机数生成需要用数学的方法
            * 忽略大小写：统一把字符串转成大写或小写即可
    */

    // var str = 'abc56d大帅';
    // console.log(str.length);//8
    // console.log(str[6]);

    // var num = Math.random();//生成0-1之间，但是不包含1的数字，包含0
    // console.log('随机数：' + num);

    // //扩大倍数
    // var num2 = Math.random() * 10;//0-10之间，但是不包括10
    // var num3 = parseInt(Math.random() * 10);//0-9之间的整数
    // var num3 = parseInt(Math.random() * 11);//0-10之间的整数
    // // var num3 = parseInt(Math.random() * 10) + 1;//1-10之间的整数

    // console.log(num2,num3);


    //1.生成四位数随机验证码（字母和数字组合）
    function ranNum() {
        var str = 'zxcvbnmlkjhgfdsaqwertyuiopZXCVBNMLKJHGFDSAQWERTYUIOP1234567890';
        // var num = parseInt(Math.random() * str.length);//0  - length-1
        // console.log(str[num]);
        var code = '';
        for(var i = 0; i < 4; i++) {
            var num = parseInt(Math.random() * str.length);
            // console.log(str[num]);
            code += str[num];
        }

        // console.log('随机数拼接成功:' + code);
        return code;
    }

    // ranNum();

    //2.把验证码放入表单中，点击一次就更新一次
    var randomNum = document.getElementById('randomNum');
    var btn = document.getElementById('btn');
    var code = document.getElementById('code');
    var inf = document.getElementById('inf');
    randomNum.value = ranNum();//把验证码放入表单中

    //点击一次就更新一次
    randomNum.onclick = function() {
        randomNum.value = ranNum();

    }

    //3.输入的验证码要和随机数一致才能验证通过
    btn.onclick = function() {
        var codeNum = code.value;
        var ranNum = randomNum.value;
        if(codeNum) {
            //非空字符串
            console.log(codeNum);
            if(codeNum.toLowerCase() == ranNum.toLowerCase()) {//全部转成小写再比较：忽略大小写
                //验证通过
                inf.innerHTML = '验证通过';
                inf.style.color = 'green';
            }else{
                //验证不通过
                inf.innerHTML = '验证不通过';
                inf.style.color = 'red';
            }
        }else{
            //空字符串是假
            console.log('你没有输入数据')
            inf.innerHTML = '请您输入验证码';
            inf.style.color = 'red';
        }
    }

</script>
</html>